

<!--link rel="stylesheet" href="../static/css/jquery-ui-1.10.3.custom.css" type="text/css" media="screen, projection"/-->

<script
	src="{{url_for('static', filename='../static/js/jquery-1.9.1.js')}}"
	type="text/javascript" charset="utf-8"></script>
<script
	src="{{url_for('static', filename='../static/bootstrap/js/bootstrap.min.js')}}"
	type="text/javascript" charset="utf-8"></script>
	
<link rel="stylesheet" href="../static/bootstrap/css/bootstrap.css"
	type="text/css" media="screen" />


<!-- Optional theme -->
<link rel="stylesheet"
	href="../static/bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../static/css/style.css">


<script src="{{url_for('static', filename='../static/js/ztable.js')}}"
	type="text/javascript" charset="utf-8"></script>
<script
	src="{{url_for('static', filename='../static/js/zmultipages.js')}}"
	type="text/javascript" charset="utf-8"></script>
<script src="{{url_for('static', filename='../static/js/zui.js')}}"
	type="text/javascript" charset="utf-8"></script>

<script
	src="{{url_for('static', filename='../static/js/ItemWizard.js')}}"
	type="text/javascript" charset="utf-8"></script>

<script>
	$(document).ready(function() {
	/*
		wizard = new ItemWizard();
	
		var	multiPages = $('#submit-item-form').ZMultiPages({
					validationUrl : '/validate_item',
					getValidationInputs:wizard.getValidationInputs,
					showErrors:wizard.showErrors,
					resetLabels:wizard.resetLabels});
					
		var imgUploader = $("#image-loader").ZImageUploader({url:'/preload_image/item'});
		*/
	});
</script>


<div class="container">


	<div class="col-md-12">
		<form id="submit-item-form" enctype="multipart/form-data"
			class="form-add-item" action="/manage_items" method="post">
			<div class="item-form-title col-md-8">
				<h3>Post your item</h3>
			</div>


			<div class="z-page" value="0">
				<div class="form-left-side col-md-8">

					<!-- Item name -->
					<div class="row form-group" name="name">
						<div class="col-md-7">
							<input class="form-control col-md-7 z-input" type="text"
								placeholder="Item name" />
						</div>
						<div class="col-md-4 z-label">Product or service name</div>
					</div>

					<!-- Description -->
					<div class="row form-group" name="description">
						<div class="col-md-7">
							<textarea class="form-control z-input" rows="5"
								placeholder="Description"></textarea>
						</div>

						<div class="col-md-4 z-label">Description</div>
					</div>

					<!-- Price -->
					<div class="row form-group" name="price">
						<div class="col-md-7">
							<input class="form-control z-input" type="text"
								placeholder="Price" />
						</div>
						<div class="col-md-4 z-label">Price</div>
					</div>

					<!-- Hidden input -->
					<input name="action" style="display: none;" /> <input name="id"
						style="display: none;" />
				</div>
				<!-- End of left side -->

				<div class="form-right-side col-md-4">
					<div class="row form-group" name="picture1">
						<div class="col-md-8">
							<div class="form-control thumbnail" id="item-picture"></div>
						</div>
						<div class="col-md-4 z-label"></div>
					</div>
				</div>
			</div>
			<!-- End of page 1 -->

			<div class="z-page hide" value="1">
				<div class="form-left-side col-md-8">
					<!-- ul id="image-loader" class="col-md-12">
							<li style="width: 100px; height: 100px;">
									<div class="z-thumbnail" style="width: 100px; height: 100px;">
										<input name="upload-image" class="z-upload-input" type="file" style="width: 90px; height: 90px; opacity:0;"/>
									</div>
							</li>
						</ul -->
				</div>

				<div class="form-right-side col-md-4">
					<div class="row form-group" name="picture">
						<div class="col-md-8">
							<div class="form-control col-md-8 thumbnail" id="item-picture">
								<img id="image-preview" alt="300x200"
									style="width: 300px; height: 200px;" />
								<div class="caption">
									<p>
										<span class="btn btn-primary btn-file">Browse<input
											id="image-input" name="item-image" type="file"></span> <a
											id="image-del-btn" class="btn btn-primary">Delete</a>
									</p>
								</div>
							</div>
						</div>
						<div class="col-md-4">label</div>
					</div>
				</div>
			</div>
			<!-- End of page 2 -->


			<div class="row col-md-12">

				<div class="btn-toolbar col-md-7 z-btn-area">
					<button type="button"
						class="z-prev-btn cancel btn btn-primary col-md-2">Previous</button>
					<button type="button"
						class="z-next-btn cancel btn btn-primary col-md-2">Next</button>
					<button type="submit"
						class="z-submit-btn submit btn btn-primary col-md-2">Submit</button>
				</div>
			</div>
		</form>
	</div>
</div>